<template>
  <div class="container">
    <el-card
      shadow="never"
      v-loading="isLoading"
      style="margin: 10px 10px 10px"
    >
      <!-- 搜索 -->
      <el-form :model="requestParameters" ref="requestParameters">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="目录名称" prop="tags">
              <el-input
                @keyup.enter="handleFilter"
                style="width: 180px"
                placeholder="请输入"
                class="filter-item"
                v-model="requestParameters.directoryName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="状态" prop="state">
              <el-select
                class="filter-item"
                style="width: 180px"
                v-model="requestParameters.state"
                @keyup.enter="handleFilter"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>

              <el-button
                class="filter-item"
                size="small"
                style="margin-left: 10px"
                @click="resetForm"
                >清除</el-button
              >
              <el-button size="small" type="primary" @click="handleFilter"
                >搜索</el-button
              >
            </el-form-item>
          </el-col>

          <el-col :span="2">
            <el-form-item>
              <el-button
                class="filter-item fr"
                size="small"
                style="margin-left: 10px"
                @click="handleChange('add')"
                type="success"
                icon="el-icon-edit"
                >新增目录</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 警告提示 -->
      <el-alert
        :title="`数据一共${counts}条`"
        type="info"
        show-icon
        style="margin-bottom: 15px"
      >
      </el-alert>
      <!-- 数据列表 -->
      <el-table
        :data="dataList"
        style="width: 100%"
        highlight-current-row
        :header-cell-style="headStyle"
      >
        <el-table-column
          align="center"
          label="序号"
          type="index"
          :index="indexMethod"
        >
        </el-table-column>
        <el-table-column align="center" label="所属学科" prop="subjectName">
        </el-table-column>
        <el-table-column align="center" label="目录名称" prop="directoryName">
        </el-table-column>
        <el-table-column label="创建者" prop="username"> </el-table-column>
        <el-table-column label="创建日期" prop="addDate">
          <template #default="{ row }">
            {{ formatTime(row.addDate) }}
          </template>
        </el-table-column>
        <el-table-column label="面试题数量" prop="totals"> </el-table-column>
        <el-table-column label="状态">
          <template #default="{ row }">
            {{ row.state ? "已启用" : "已禁用" }}
          </template>
        </el-table-column>
        <!-- 操作按钮 -->
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button
              type="text"
              v-if="!scope.row.state"
              @click="ChangeState(scope.row.id, scope.row.state)"
              >启用</el-button
            >
            <el-button
              type="text"
              v-else
              @click="ChangeState(scope.row.id, scope.row.state)"
              >禁用</el-button
            >
            <el-button
              type="text"
              @click="editRole(scope.row)"
              :disabled="scope.row.state ? true : false"
              >编辑</el-button
            >

            <el-button
              type="text"
              @click="removeUser(scope.row.id)"
              :disabled="scope.row.state ? true : false"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagingFlex">
        <div class="pages">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="Number(requestParameters.page)"
            :total="Number(counts)"
            :page-size="Number(requestParameters.pagesize)"
            :page-sizes="[10, 20, 30, 50]"
            layout=" prev, pager, next,sizes, jumper"
          ></el-pagination>
        </div>
      </div>
      <!-- 新增标签弹层 -->
      <el-dialog
        :close-on-click-modal="false"
        :title="showTitle"
        :visible="showDialog"
        @close="closeDialog"
        width="28%"
      >
        <el-form
          ref="roleForm"
          :model="form"
          :rules="rules"
          label-width="100px"
        >
          <el-form-item label="所属学科" prop="subjectID">
            <el-select
              class="filters-item"
              style="width: 100%"
              v-model="form.subjectID"
              placeholder="请选择"
            >
              <el-option
                v-for="item in NewList"
                :key="item.value"
                :label="item.subjectName"
                :value="item.subjectID"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称" prop="directoryName">
            <el-input
              style="width: 100%"
              v-model="form.directoryName"
              placeholder="请输入角色描述"
            />
          </el-form-item>
        </el-form>

        <div slot="footer" class="button_right_Two">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="confirmAddRole">确认</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, remove, add, update, changeState } from '@/api/hmmm/directorys'
import { status } from '@/api/hmmm/constants'
// 导入dayjs
import dayjs from 'dayjs'
export default {
  data () {
    return {
      NewList: [],
      dataList: [], // 存储数据
      counts: 0, // 总记录数
      requestParameters: {
        page: 1, // 当前页
        pagesize: 10 // 每页条数
      },
      isLoading: false,
      showDialog: false,
      form: {
        id: null,
        directoryName: '', // 目录名称
        // 学科名称
        subjectID: ''
      },
      rules: {
        subjectID: [
          {
            required: true,
            message: '请输入学科名称',
            trigger: ['blur', 'change']
          }
        ],
        directoryName: [
          {
            required: true,
            message: '请输入目录名称',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  computed: {
    status () {
      return status
    },
    showTitle () {
      return this.form.id ? '编辑目录' : '添加目录'
    }
  },
  created () {
    this.getList()
  },
  methods: {
    headStyle () {
      return 'color:#909399;background-color:#FAFAFA;border-bottom-color:#E8E8E8;border-bottom-width:2px'
    },
    // 调取数据显示
    async getList () {
      const { data } = await list(this.requestParameters)
      // console.log(data)
      this.isLoading = true
      // 获取数据给dataList
      this.dataList = data.items
      this.counts = data.counts
      this.isLoading = false
    },
    // 序号显示方法
    indexMethod (index) {
      // return console.log(index)
      return (
        (this.requestParameters.page - 1) * this.requestParameters.pagesize +
        index +
        1
      )
    },
    // 分页
    // 每页显示信息条数
    handleSizeChange (val) {
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.getList(this.requestParameters)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.requestParameters.page = val
      this.getList()
    },
    // 处理时间
    formatTime (time) {
      return dayjs(time).format('YYYY-MM-DD' + '       ' + 'hh:mm:ss')
    },
    // 搜索信息
    handleFilter () {
      if (
        this.requestParameters.directoryName === '' &&
        this.requestParameters.state === undefined
      ) {
        this.getList()
      } else {
        this.requestParameters.page = 1
        this.getList(this.requestParameters, this.directoryName)
      }
    },
    // 重置
    resetForm () {
      // this.$refs.requestParameters.resetFields()
      this.requestParameters.directoryName = ''
      this.requestParameters.state = undefined
    },
    // 删除
    removeUser (user) {
      this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: user })
            .then((response) => {
              this.$message.success('成功删除了目录')
              this.dataList.splice(user, 1)
              this.getList(this.requestParameters)
            })
            .catch((response) => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 关闭
    closeDialog () {
      this.showDialog = false
      // 关闭弹框重置数据
      this.$refs.roleForm.resetFields()
      // 手动清空数据
      this.form = {
        directoryName: '', // 目录名称
        subjectName: '' // 学科名称
      }
    },
    // 添加展开
    async handleChange () {
      this.showDialog = true
      const {
        data: { items }
      } = await list({ page: 1, pagesize: 9999 })
      // console.log(items)
      const list2 = items.filter((item) => {
        return item.subjectName !== null
      })
      this.NewList = list2
    },
    // 添加确认提交
    confirmAddRole () {
      this.$refs.roleForm.validate(async (flag) => {
        if (!flag) return
        if (!this.form.id) {
          await add(this.form)
          this.$message.success('恭喜!添加成功')
        } else {
          await update(this.form)
          this.$message.success('恭喜!修改成功')
        }
        this.getList()
        this.closeDialog()
      })
    },
    // 修改
    editRole (row) {
      // const res = await detail(id)
      // console.log(res)
      // this.form = data
      this.form = row
      this.showDialog = true
    },
    // 点击启用禁用的方法
    async ChangeState (id, state) {
      await changeState({ id, state: state ? 0 : 1 })
      this.$message.success('操作成功')
      this.getList()
    }
  }
}
</script>
<style scoped lang='scss'>
.pagingFlex {
  float: right;

  margin: 20px 0;
  ::v-deep .el-pagination__jump {
    margin-left: 0;
  }
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

.button_right_Two {
  display: flex;
  justify-content: flex-end;
}
</style>
